<template>
  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : editStatus?'查看':$t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
      <el-form-item prop="name" label="安装包名称">
        <el-input v-model="dataForm.name" :readonly="editStatus" placeholder="请输入线路名称"></el-input>
      </el-form-item>
	  <el-form-item prop="packagePath" label="安装包的路径">
		  <el-upload
		    v-model="dataForm.packagePath"
		    class="upload-demo"
			:headers="headers"
		    :action="url"
			:on-success="handleSuccess"
		    :limit="1"
		    :file-list="fileList">
		    <el-button v-if="!editStatus" size="small" type="primary">点击上传</el-button>
		  </el-upload>
		  
	  </el-form-item>
	  <el-form-item v-if="editStatus" prop="createDate" label="登记日期">
	    <el-input v-model="dataForm.createDate" readonly placeholder="请输入线路名称"></el-input>
	  </el-form-item>
	  <el-form-item v-if="editStatus" prop="sysUserName" label="登记人">
	    <el-input v-model="dataForm.sysUserName" readonly placeholder="请输入登记人"></el-input>
	  </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button v-if="!editStatus"  @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button v-if="!editStatus" type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import Cookies from 'js-cookie'
export default {
  data () {
    return {
      visible: false,
	  editStatus:false,
      dataForm: {
		  id:'',
          name: '',
		  packagePath:'',//路径
      },
	  headers:{
		  'Authorization':Cookies.get('token')
	  },
	  fileList:[],
	  url:window.SITE_CONFIG['apiURL']+'/psc/packagemanage/Uploader'
    }
  },
  computed: {
    dataRule () {
      return {
        name: [
          { required: true, message: '请输入安装包的名称', trigger: 'blur' }
        ],
		packagePath: [
          { required: true, message: '请上传安装包', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    init (status) {
      this.visible = true
	  if(status){
	  	this.editStatus = status
	  }else{
		  this.editStatus = false
	  }
      this.$nextTick(() => {
		
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
           this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/psc/line/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
      }).catch(() => {})
    },
	handleSuccess(res,file,fileList){
	   	if(res.code==0){
			this.dataForm.packagePath = res.data
		}
	},
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
		var obj = {
			id:this.dataForm.id,
			name:this.dataForm.name,
			packagePath:this.dataForm.packagePath,
		}
        this.$http[!this.dataForm.id ? 'post' : 'put']('/psc/packagemanage', obj).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style scoped>
	.stationList>>>.el-step__icon-inner{
		opacity: 0;
	}
	.stationList>>>.el-step.is-vertical .el-step__main{
		display: flex;
		align-items: center;
	}
	.stationList>>>.el-step.is-vertical .el-step__title{
		line-height: auto;
		padding-bottom:0px;
	}
	.stationList>>>.el-step:last-of-type .el-step__line{
		display: block;
	}
</style>
